<template>
  <div id="login">
    <div class="login-inner">
      <div class="login-module same" v-show="showLogin">
        <h2 class="title">登录</h2>
        <div class="username content">
          <Icon type="ios-contact"/>
          <input v-model="loginForm.username" type="text" placeholder="请输入用户名">
        </div>
        <div class="password content">
          <Icon type="md-lock"/>
          <input v-model="loginForm.password" type="password" placeholder="请输入密码">
        </div>
        <Button type="success" :loading="loginLoading" @click="login">登录</Button>
        <div class="goback-wrapper">
          <span class="iconfont icon-fanhui" @click="goback"></span>
        </div>
      </div>
      <div class="main-module" v-show="showMain">
        <div class="logo">
          <span class="iconfont icon-weixin"></span>
        </div>
        <Button type="success" @click="clickMainLogin">登录</Button>
        <Button @click="clickMainRegister">注册</Button>
      </div>
      <div class="register-module same" v-show="showRegister">
        <h2 class="title">注册</h2>
        <div class="username content">
          <Icon type="ios-contact"/>
          <input v-model="registerForm.username" type="text" placeholder="请输入用户名">
        </div>
        <div class="password content">
          <Icon type="md-lock"/>
          <input v-model="registerForm.password" type="password" placeholder="请输入密码">
        </div>
        <div class="goback-wrapper register-goback" @click="goback">
          <span class="iconfont icon-fanhui"></span>
        </div>
        <Button @click="register" :loading="registerLoading">注册</Button>
      </div>
    </div>
  </div>
</template>

<script>
import {reqLogin, reqRegister} from '@/api/index.js'
export default {
  data () {
    return {
      showLogin: false, // 显示登录模块
      showRegister: false, // 显示注册模块
      showMain: true, // 显示主模块
      loginLoading: false,
      registerLoading: false,
      loginForm: {
        username: '',
        password: ''
      },
      registerForm: {
        username: '',
        password: ''
      }
    }
  },
  methods: {
    async login () {
      let result
      this.loginLoading = true // 将按钮切换到加载状态
      if (!this.loginForm.username || !this.loginForm.password) {
        this.$Message.error('用户名或密码不能为空')
        this.loginLoading = false
        return false
      } else {
        // 发送登录请求
        result = await reqLogin(this.loginForm.username, this.loginForm.password)
        if (result.success) { // 登录成功
          this.$store.dispatch('saveUserInfo', result.data) // 将用户信息保存到vuex
          this.$Message.success('登录成功') // 弹出成功消息
          this.$router.replace('/main') // 跳转路由
          this.loginLoading = false
        } else { // 登录失败
          this.$Message.error(result.info)
          this.loginLoading = false
        }
      }
    },
    async register () {
      let result
      this.registerLoading = true
      if (!this.registerForm.username || !this.registerForm.password) {
        this.$Message.error('用户名或密码不能为空')
        this.loginLoading = false
        return false
      } else {
        // 发送注册请求
        result = await reqRegister(this.registerForm.username, this.registerForm.password)
        if (result.success) {
          this.$Message.success('注册成功')
          this.goback() // 回到主模块
          this.registerLoading = false
          this.registerForm.username = ''
          this.registerForm.password = ''
        } else {
          this.$Message.error(result.info)
          this.registerLoading = false
        }
      }
    },
    clickMainLogin () { // 点击Main的登录切换到登录块
      this.showLogin = true
      this.showMain = false
    },
    clickMainRegister () { // 点击Main的注册切换到注册块
      this.showRegister = true
      this.showMain = false
    },
    goback () { // 点击返回到主模块
      this.showLogin = false
      this.showRegister = false
      this.showMain = true
    }
  }
}
</script>

<style lang="stylus">
#login
  width 100%
  height 100%
  min-width 860px
  min-height 700px
  position relative
  .login-inner
    width 380px
    height 540px
    position absolute
    box-shadow #999 0 2px 10px
    left 50%
    top 50%
    transform translate(-50%,-50%)
    .login-module, .register-module
      width 380px
      height 540px
      border-radius 4px
      position absolute
      background #fff
      .ivu-btn-success
        display block
        width 220px
        height 43px
        margin 60px auto 30px auto
        font-size 17px
        background-color #1aad19
        border-color #1aad19
        box-shadow none
      .goback-wrapper
        text-align center
        &.register-goback
          height 40px
          margin 60px auto 33px auto
        .iconfont
          font-size 30px
          cursor pointer
      .ivu-btn-default
        display block
        width 220px
        height 43px
        margin 0 auto
        font-size 17px
        background-color #fff
        border-color #e3e4e4
        color #747b8b
        box-shadow none
      .title
        height 100px
        text-align center
        line-height 100px
        font-size 25px
        position relative
        &::before
          content ''
          display block
          width 110px
          height 2px
          background-color #5f5f5f
          position absolute
          top 50%
          left 30px
        &::after
          content ''
          display block
          width 110px
          height 2px
          background-color #5f5f5f
          position: absolute
          right 30px
          top 50%
      .content
        width 220px
        height 40px
        position relative
        &.username
          margin 50px auto 40px auto
        &.password
          margin 0 auto
        .ivu-icon
          position absolute
          font-size 25px
          top 8px
          left 6px
        input
          border 1px solid #d0d0d0
          display block
          width 100%
          height 100%
          padding-left 35px
          box-sizing border-box
          border-radius 5px
          outline none
          font-size 14px
          color #5f5f5f
    .main-module
      width 380px
      height 540px
      border-radius 4px
      position absolute
      background #fff
      left 0px
      .logo
        width 100%
        height 300px
        position relative
        .iconfont
          font-size 120px
          color #e4e4e4
          position absolute
          top 50%
          left 50%
          transform translate(-50%,-50%)
      .ivu-btn-success
        display block
        width 220px
        height 43px
        margin 30px auto 30px auto
        font-size 17px
        background-color #1aad19
        border-color #1aad19
        box-shadow none
      .ivu-btn-default
        display block
        width 220px
        height 43px
        margin 0 auto
        font-size 17px
        background-color #fff
        border-color #e3e4e4
        color #747b8b
        box-shadow none
</style>
